<template>
    <el-dialog 
        v-model="dialogVisible"
        title="对话框"
        :append-to-body="true"
        custom-class="dialogWrap"
        :before-close="beforeCloseMet"
        >
        <!--内容区域-->
        <el-form ref="elFormRef" :model="submitParams" :rules="rules" label-width="auto">
            <el-row :gutter="20">
                <el-col :span="24">
                    <!--日期选择器-->
                    <el-form-item label="日期选择器：" prop="ymd">
                        <el-date-picker
                            v-model="submitParams.ymd"
                            type="date"
                            placeholder="请选择日期选择器"
                            value-format="YYYY-MM-DD"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="24">
                    <!--日期时间范围选择器-->
                    <el-form-item label="日期范围：" prop="ymdRange">
                        <el-date-picker
                            v-model="submitParams.ymdRange"
                            type="daterange"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            value-format="YYYY-MM-DD"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <!--底部按钮-->
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancelDialog">取消</el-button>
                <el-button type="primary" @click="submitForm">确定</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref,reactive,defineExpose } from 'vue'
/* —— data ———————————————————— */
//reactive只能用于对象类型 (对象、数组和如 Map、Set 这样的集合类型)
let dialogVisible = ref(false)
//建议在父组件中使用refs调用open方法
function open() {
    dialogVisible.value = true;
};
//通过 defineExpose 编译器宏来显式指定在 <script setup> 组件中要暴露出去的属性或者方法
defineExpose({
    open
})

//表单数据
let submitParams = reactive({
    ymd: "",
    ymdRange: [],
    ymdRangeStart: "",
    ymdRangeEnd: "",
})

//表单校验规则
let rules = reactive({
    ymd: [{required: true, message: "请选择日期选择器", trigger: 'change'}],
    ymdRange: [{required: false, message: "请选择日期范围", trigger: 'change'}],
})
//确定按钮调用
const elFormRef = ref(null);
function submitForm() {
    elFormRef.value.validate((valid) => {
        if (valid) {
            //校验通过
            //调用关闭对话框方法，关闭对话框
            cancelDialog();
        } else {
            //校验未通过
        }
    });
};
//关闭对话框方法
let emit = defineEmits(['updateDialogKey'])
function cancelDialog(){
    /**
     * 如果弹窗里面有表单，用于重置表单
     * 其他页面引入此dialog组件时候，标签上添加监听，例如：
     * @updateDialogKey = 'dialogDialogKey++'
     * 注意：dialogDialogKey 变量，需要再使用dialog的组件中的data里面声明，例如：
     * dialogDialogKey:0
    */
    emit('updateDialogKey')
    //关闭对话框
    dialogVisible.value = false;
    console.log('关闭对话框', dialogVisible.value);
};
//关闭前的回调函数
function beforeCloseMet(done){
    /**
     * 如果弹窗里面有表单，用于重置表单
     * 其他页面引入此dialog组件时候，标签上添加监听，例如：
     * @updateDialogKey = 'dialogDialogKey++'
     * 注意：dialogDialogKey 变量，需要再使用dialog的组件中的data里面声明，例如：
     * dialogDialogKey:0
    */
    emit('updateDialogKey')
    // 回调函数内执行 done 参数方法的时候才是真正关闭对话框的时候
    done()
};
</script>
<style type="text/css" lang="less" scoped>
.dialogWrap {
}
</style>